<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>邀请记录</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
        body{
            background:rgba(0,0,0,0);
        }
        .u-wrap {
            background: #ffffff;
            border-radius: 0.3rem .3rem 0 0;
            position:fixed;
            bottom:0;
            left:0;
            width:100%;
        }
        .u-wrap ._title {
            position: relative;
            height: 1.1rem;
            line-height: 1.25rem;
            font-weight:bold;
            color:rgba(0,0,0,1);
            font-size: 0.35rem;
            text-align: center;
        }
        .u-wrap ._close {
            position: absolute;
            top: 0.05rem;
            right: 0.3rem;
            width: 0.4rem;
            height: 100%;
            display: flex;
            align-items: center;
        }
        .u-wrap ._close ._ico{
            width: 0.3rem;
            height: 0.3rem;
            background-image: url(../../../image/icons/close.png);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: contain;
        }
        .u-wrap ._content {
            padding: 0 0.4rem;
            font-size: 0.3rem;
            max-height:60vh;
            -webkit-overflow-scrolling: touch;
            overflow-y:auto;
        }
        .invite_ul{
            margin-top:0.3rem;
        }
        .invite_ul li{
            margin-bottom:0.62rem;
            position:relative;
        }
        .invite_ul li:nth-last-child(1){
            margin-bottom:0;
        }
        .invite_ul li>img{
            float:left;
            width:1rem;
            height:1rem;
            border-radius:50%;
        }
        .invite_ul li>.info{
            float:left;
            padding-left:0.35rem;
            padding-right:0.2rem;
            width:calc(100% - 1.3rem - 1rem);
        }
        .invite_ul li>.info h3{
            font-weight:normal;
            font-size:0.32rem;
            color:#333;
            line-height:0.4rem;
        }
        .invite_ul li>.info span{
            display: block;
            color:#ACACAC;
            font-size:0.27rem;
            line-height:0.4rem;
            margin-top:0.2rem;
        }
        .invite_ul li>.down{
            width:1.3rem;
            font-size:0.26rem;
            color:#ACACAC;
            border:1px solid #F6F6F6;
            border-radius:1rem;
            height:0.55rem;
            line-height:calc(0.55rem - 2px);
            text-align:center;
            position:absolute;
            padding:0px 0.2rem;
            right:0;
            top:50%;
            transform: translate(0,-50%);
        }
        .minHeightFull{
            height:8rem;
            position:relative;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <section class="comPop flexColumnEnd" @click="closeMe();">
            <div class="u-wrap" @click.stop>
                <div class="_title">
                    邀请记录
                    <div class="_close"@click="closeMe()">
                        <div class="_ico"></div>
                    </div>
                </div>
                <div class="_content" ref="content" @scroll="checkLoad">
                    <template v-if="list!=null">
                        <template v-if="list.length>0">
                            <ul class="invite_ul">
                                <li class="clearfix" v-for="item in list">
                                    <img :src="item.avatar" />
                                    <div class="info">
                                        <h3 class="ell">{{item.user_name}}</h3>
                                        <span class="ell">{{item.time_created | dateFormate}}</span>
                                    </div>
                                    <a class="down">{{item.is_down_1 == 1 ? '下级' : '下下级'}}</a>
                                </li>
                            </ul>
                            <div class="loadText" ref="loadBar">
                                <div class="weui-loadmore" v-if="hasMore">
                                    <i class="weui-loading"></i>
                                    <span class="weui-loadmore__tips">正在加载</span>
                                </div>
                                <span v-else class="over">我已经到底啦！</span>
                            </div>
                        </template>
                        <template v-else>
                            <div class="minHeightFull whiteBg">
                                <section class="m-no">
                                    <div class="u-img"></div>
                                    <div class="u-spec">暂无数据</div>
                                </section>
                            </div>
                        </template>
                    </template>
                    <template v-else>
                        <div class="minHeightFull whiteBg">
                            <div class="loadLayer"><span></span> <span></span> <span></span> <span></span> <span></span></div>
                        </div>
                    </template>
                </div>
            </div>
        </section>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    list:null,
                    page: 1,
                    isFetching: false,
                    hasMore: true,
                },
                methods:{
                    closeMe: function(){
                        api.closeFrame();
                    },
                    fetchRecords: function(){
                        if(this.isFetching){
                            return false;
                        }
                        this.isFetching = true;
                        var _this = this;
                        $.ajax({
                            url: '/get/inviter/mydown?page='+this.page,
                            method: 'get',
                            success: function(res){
                                var list = res.data.result;
                                var hasMore = list.length >= res.data.pagesize;
                                _this.hasMore = hasMore;
                                _this.isFetching = false;

                                if(_this.page == 1){
                                    _this.list = list;
                                }else{
                                    _this.list = _this.list.concat(list);
                                }
                                _this.page += 1;
                                _this.$nextTick(_this.checkLoad);
                            },
                            error: function(err){
                                _this.isFetching = false;
                                $.toast(err.message);
                            }
                        });
                    },
                    onLoadMore: function(){
                        if(this.isFetching){
                            return false;
                        }
                        if(!this.hasMore){
                            return false;
                        }
                        this.fetchRecords();
                    },
                    checkLoad: function(){
                        if(this.list && this.list.length > 0){
                            var contentHeight = this.$refs.content.clientHeight;
                            var contentScrollTop = this.$refs.content.scrollTop;
                            var loadBarTop = this.$refs.loadBar.offsetTop - 20;
                            if(loadBarTop - contentScrollTop <= contentHeight){
                                this.onLoadMore();
                            }
                        }
                        
                    },

                },
                filters: {
                    dateFormate: function(time){
                        return utils.tsToDateFormat(time, 'yyyy/MM/dd hh:mm');
                    },
                },
                mounted(){
					$.initJs(this);
                    this.fetchRecords();
                }
            });
        }
    </script>
</body>
</html>
